<template>
  <div class="home">
    <div>
      <Search></Search>
      <Banner></Banner>
      <Nav></Nav>
      <Spike></Spike>
      <GroupShop></GroupShop>
      <YourLikes @viewDetail="viewDetail"></YourLikes>
    </div>
    <goodDetail ref="detailPage"></goodDetail>
  </div>
</template>

<script>
// @ is an alias to /src
import Search from 'components/search'
import Banner from 'components/banner'
import Nav from 'components/nav'
import Spike from 'components/spike'
import GroupShop from 'components/group-shop'
import YourLikes from 'components/your-likes'
import goodDetail from './detail'
export default {
  name: 'home',
  components: {
    Search,
    Banner,
    Nav,
    Spike,
    GroupShop,
    YourLikes,
    goodDetail
  },
  data () {
    return {
      isShowHomePage: true
    }
  },
  methods: {
    viewDetail () {
      this.isShowHomePage = false;
      this.$refs.detailPage.show();
    }
  }
}
</script>
<style lang='stylus' scoped>
.home
  padding-bottom: 1.1rem
</style>
